<template>
  <div class="login-view">
    <div class="login-container">
      <Login 
      style="width: 200px" 
      ref="login"
      title="前端图床" 
    />
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { mapState } from 'vuex'

import { Login } from '../components'

export default defineComponent({
  name: 'LoginView',
  components: {
    Login,
  },
  props: {},
  setup() {
    return {}
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {
    this.$refs.login.style = 'width: 200px'
  }
})
</script>

<style lang="scss">
@import '../index.scss';

.login-view {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,#3bb58e,#468ccb);
  display: flex;
  justify-content: center;
  align-items: center;
  .login-container {
    background: #fff;
    box-shadow: 0 0 10px #ececec;
    border-radius: 4px;
    padding: 20px;
    width: 60%;
  }
}
</style>
